{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<style>
    .layui-tree-entry{font-size:15px; line-height:24px}
    .layui-tree-set{padding:2px 0}
    .layui-tree-iconClick .layui-icon{color:#1E9FFF}
    .layui-icon layui-icon-file{font-size:16px;}
    .layui-tree-icon {height: 15px;width: 15px; text-align: center;border: 1px solid #1E9FFF; color:#1E9FFF}
    .layui-tree-line .layui-tree-set .layui-tree-set:after{top:18px;}
    .tree-left{width:200px; float:left; height:calc(100% - 30px); overflow: scroll; border:1px solid #eeeeee; background-color:#FAFAFA; padding:12px 12px 12px 5px;}
    .tree-left h3{font-size:16px; height:30px; padding-left:10px; font-weight:800}

    .gougu-upload-files{background-color: #ffffff; border:1px solid #e4e7ed;color: #c0c4cc;cursor: not-allowed; padding:0 12px; width:180px; box-sizing: border-box; display: inline-block; font-size: inherit; height: 38px; line-height: 35px; margin-right:8px; border-radius:2px;}
    .gougu-upload-tips{color:#969696}
    .layui-form-item{margin-bottom:8px;}
    .layui-input-block{min-height:24px;}
</style>
<div class="p-3">
    <form class="layui-form gg-form-bar border-x border-t">
        <div class="layui-input-inline layui-td-gray" style="width:300px;">
            <input id="year" name="year" autocomplete="off"  class="layui-input" value="{$date}"  lay-verify="required" placeholder="请选择月份" lay-reqText="请选择月份">
        </div>
        <div class="layui-input-inline" style="width:150px;">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
      <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="import">批量导入工资记录</button>
      <span class="red iconfont icon-zhaoshengbaobiao">录入对应月分员工工时后生成工资记录</span>
  </div>
</script>

{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
	<script>
    const moduleInit = ['tool','tablePlus'];


    //表头工具栏事件

	function gouguInit() {
        var table = layui.tablePlus, tool = layui.tool,tree = layui.tree,form = layui.form,upload = layui.upload;

        table.on('toolbar(test)', function(obj){
            if (obj.event === 'add') {
                tool.side("/home/Wages/operation");
                return;
            }
        });

        table.on('toolbar(test)', function(obj){
            if (obj.event === 'import') {
                uploadImport();
                return;
            }
        });

		layui.pageTable = table.render({
			elem: '#test'
			,toolbar: '#toolbarDemo'
			,defaultToolbar: false
			,title:'固定资产工时'
			,url: "/home/Wages/index"
			,cols: [[
					{field:'month',width:80, title: '月份', align:'center'}
					,{field:'wages',title: '工资总计(元)'}
					,{field:'accumulation_fund',title: '社保合计(元)'}
					,{field:'social',title: '公积金合计(元)'}
					,{field:'sum',title: '工资社保公积金合计(元)'}
					,{field:'all_time',title: '工时总计'}
					,{width:150,title: '操作', align:'center',templet: function(d){
						var html='';
                        var btn='<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>';
                        html = '<div class="layui-btn-group">'+btn+'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'+'</div>';
						return html;
					}}
				]]
			});

        table.on('tool(test)',function (obj) {
            if(obj.event === 'edit'){
                tool.side('/home/Wages/operation?year='+obj.data.year+'&month='+obj.data.month);
                return;
            }
        });


        //监听搜索提交
        form.on('submit(webform)', function (data) {
            layui.pageTable.reload({ where: data.field });
            return false;
        });

        var form = layui.form,
            tool=layui.tool,
            oaTool=layui.oaTool,
            laydate = layui.laydate;
        //日期时间范围
        laydate.render({
            elem: '#year',
            type: 'year',
            format: 'yyyy',
            showBottom: false
        });

        let uploadFiles;
        function clearFile() {
            for (let x in uploadFiles) {
                delete uploadFiles[x];
            }
            $('#gougu-upload-choosed').html('');
        }
        function uploadImport(){
            layer.open({
                'title':'批量导入工资记录',
                'type':1,
                'area': ['640px', '360px'],
                'content':'<div class="layui-form p-3">\
						<div id="uploadType1">\
							<div class="layui-form-item">\
								<label class="layui-form-label">文件：</label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-files">.xls,.xlsx</span><button type="button" class="layui-btn layui-btn-normal" id="uploadSelect">选择文件</button><a href="/static/home/file/顶裕OA员工工资记录导入模板.xlsx" class="layui-btn ml-4">Execl表格模板下载</a>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-tips">1、只能上传 .xls、.xlsx文件；<br>2、数据请勿放在合并的单元格中；<br>3、文件大小请勿超过2MB，导入数据不能超过3000条<br>4、如果导入失败，请注意检查表格数据，格式按照样本填写，部门、职位需要系统中存在，不存在的话可能会导入失败。</span>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block green" id="gougu-upload-choosed"></div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block red" id="gougu-upload-note"></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<button type="button" class="layui-btn" id="uploadAjax">上传并导入</button>\
								</div>\
							</div>\
						</div> \
				</div>',
                success: function(layero, idx){
                    form.render();
                    //选文件
                    let uploadImport = upload.render({
                        elem: '#uploadSelect'
                        ,url: '/home/Wages/fileWages'
                        ,auto: false
                        ,accept: 'file' //普通文件
                        ,acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 此处设置上传的文件格式
                        ,exts: 'xls|xlsx' //只允许上传文件格式
                        ,bindAction: '#uploadAjax'
                        ,choose: function(obj){
                            uploadFiles = obj.pushFile();
                            // 清空,防止多次上传
                            clearFile();
                            obj.preview(function(index, file, result){
                                obj.pushFile();// 再添加
                                $('#gougu-upload-choosed').html('已选择：'+file.name);
                            });
                        }
                        ,before: function(obj){
                        }
                        ,progress: function(n, elem, e){
                            $('#gougu-upload-note').html('文件上转中...');
                            if(n==100){
                                $('#gougu-upload-note').html('数据导入中...');
                            }
                        }
                        ,error: function(index, upload){
                            clearFile();
                            $('#gougu-upload-note').html('数据导入失败，请关闭重试');
                        }
                        ,done: function(res, index, upload){
                            clearFile();
                            layer.msg(res.msg);
                            $('#gougu-upload-note').html(res.msg);
                            if(res.code==0){
                                layer.close(idx);
                                layui.pageTable.reload();
                            }
                        }
                    });
                }
            });
        }



    }
	</script>
{/block}
<!-- /脚本 -->